<template>
	<view class="page">
		<comHead :datas="datasObj">
			<template #headerContent>
				<view style="height: 30rpx;"></view>
				<view
					style="padding: 30rpx 30rpx 0;box-sizing: border-box;background-color: #fff;border-radius: 40rpx 40rpx 0 0;">
					<view class="head_box bd-r40 pd-20" style="height: 264rpx;">
						<view class="flex-center">
							<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
								mode="aspectFit"></image>
							<text class="ft-28 c-33 fw-800 ft ml-4">积分余额</text>

						</view>
						<view class="head_box_money ml-30 flex-center">
							<span class="moneyItem ft-num3 mt-10">{{ detail.integral_format }}</span>
						</view>
						<view class="title_box flex-bwt pd-20  bd-r20 mt-20">

							<view class="title_box_item flex-center  ft-20">
								<span class="text ft-24 c-66">今日收入</span>
								<span class="text2 ft-num3 ft-36 c-33 ml-4">{{ detail.today_integral_format }}</span>
							</view>
							<text class="line"
								style="display: inline-block;width: 1rpx;height: 40rpx;background-color: #F1F1F1;margin:0 10rpx;"></text>

							<view class="title_box_item flex-center  ft-20">
								<span class="text ft-24 c-66">累计收入</span>
								<span class="text2 ft-num3 ft-36 c-33 ml-4">{{ detail.income_integral_format }}</span>
							</view>
						</view>
					</view>
					<view class="tabBar flex-start mt-30" style="height: 72rpx;">
						<view class="item ft c-66 flex-center mr-20" :class="{ active: selectId === item.id }"
							v-for="(item, index) in tableList" :key="index" @click="selectBtn(index, item)">{{
								item.name }}
						</view>
					</view>
					<!-- 列表 -->
					<view class="time_box bd-r20 flex-bwt pd-20 mt-20" style="height: 74rpx;">
						<view class="time ft-24 c-33 flex-center" @click="openTime">
							{{ timeStr || '全部时间' }}
							<image class="icon_samll ml-8"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
							</image>

						</view>
						<view class="rig_box flex">
							<view class="rig_box_item ft-24 c-66">
								收入<span class="ft-28 ft-num3 c-33 fw-900 ml-4">{{ detail.filter_income_integral_format
								}}</span>
							</view>
							<text class="line"
								style="display: inline-block;width: 1rpx;height: 30rpx;background-color: #F1F1F1;margin:0 20rpx;"></text>
							<view class="rig_box_item ft-24 c-66">
								支出<span class="ft-28 ft-num3 c-33 fw-900 ml-4">{{ detail.filter_expenses_integral_format
								}}</span>
							</view>
						</view>
					</view>
				</view>
			</template>
		</comHead>
		<view class="content_box w-100 pd-30">
			<view class="card_box" v-if="integralList.length > 0">
				<view class="card_item bd-r20" :class="{ 'mt-20': index > 0 }" v-for="(item, index) in integralList"
					:key="index">
					<view class="flex-bwt">
						<text class="ft-24 c-33 fw-800">{{ item.title }}</text>
						<text class="rig ft-22 c-99">{{ item.created_at }}</text>
					</view>
					<view class="flex-bwt">
						<text class="ft-22 c-99 te-1">{{ item.des }}</text>
						<view class="rig ft-20 c-33" :class="{ active: item.type == 2 }">{{ item.type == 2 ? '-' : '+'
						}}<span class="ft-36 fw-900 ft-num3">{{ item.integral }}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="integralList.length == 0">暂无数据</view>
		</view>
		<view style="height: 98rpx;"></view>

	</view>
	<!-- 日期选择 -->
	<u-popup :show="showPup" @close="closePopup" :round="20">
		<!-- 弹窗标题与关闭按钮 -->
		<view class="popup-header">
			<text @click="closePopup">取消</text>
			<view class="button_box bd-r20 flex">
				<view class="btn year_m" :class="{ active: btnVal }" @click="changeYearBtn(1)">
					按年月
				</view>
				<view class="btn year" :class="{ active: !btnVal }" @click="changeYearBtn(0)">
					按年
				</view>
			</view>
			<text @click="submit">确定</text>
		</view>
		<picker-view :indicator-style="`height:50px;`" :value="xzIndex" @change="bindPickerChange" class="picker-view">
			<picker-view-column style="height: 100%;">
				<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
			</picker-view-column>
			<picker-view-column style="height: 100%;" v-if="btnVal">
				<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
			</picker-view-column>
		</picker-view>
	</u-popup>
</template>

<script setup lang="js">
import comHead from '@/components/comHead.vue'
import {
	reactive,
	ref
} from 'vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";


let datasObj = reactive({
	title: '积分明细',
	img: 'https://cdn.oss.bon-top.cn/static_bc/images/head_bg.png',
	color: '#fff',
	direction: '',
	scrollTop: 0,
	backisImg: true,//导航文字模块的背景图
	headerisImg: true,//整个huader模块的背景图
	fullImag: false,//header是否显示完整的图片
	imgHeight: 608,
	height: 608,
})
const list = ref([{
	title: '每日任务',
	text: '评论或问答：美国 EB1A 杰出人才移民 成就卓越人评论或问答：美国 EB1A 杰出人才移',
	time: '2025-02-25',
	num: -10
}])
const btnVal = ref(1)
const date = new Date()
const years = []
const year = ref(date.getFullYear())
const months = []
const month = ref(date.getMonth() + 1)
const bindPickerChange = (e) => {
	const val = e.detail.value
	// xzIndex.value=[,months[val[1]]]
	year.value = years[val[0]] ?? date.getFullYear()
	month.value = months[val[1]] ?? ''
}
const changeYearBtn = (val) => {
	btnVal.value = val

	year.value = date.getFullYear()
	if (val) {
		xzIndex.value = [9999, date.getMonth()]
		month.value = date.getMonth() + 1
	} else {
		xzIndex.value = [9999]
		month.value = ''
	}

}
const showPup = ref(false)
const openTime = () => {
	showPup.value = true
}
const xzIndex = ref([9999, date.getMonth()])
const timeStr = ref('')
// 确认选择
const submit = () => {
	let arr = [year.value, month.value].filter(f => f !== '')
	timeStr.value = arr.join('-')
	closePopup()
	reloadData()
};
// 关闭弹窗
const closePopup = () => {
	// props.show = false;
	showPup.value = false

};
const tableList = ref([{
	id: '',
	name: '全部',
	key: ''
},
{
	id: 1,
	name: '收入',
	key: ''
}, {
	id: 2,
	name: '支出',
	key: ''
}
])
// 选项点击切换
const selectId = ref('')
const selectName = ref('')
const selectBtn = async (idx, item) => {
	selectId.value = item.id
	selectName.value = item.key
	reloadData()
}

const reloadData = () => {
	integralPage.value = 1
	integralList.value = []
	integralLoading.value = true
	getIntegralListData()
}

const integralPage = ref(1)
const integralList = ref([])
const integralLoading = ref(true)
const detail = ref({})
const getIntegralListData = () => {
	if (!integralLoading.value) {
		return
	}
	uni.showLoading()
	integralLoading.value = false
	utils
		.request(
			api.getIntegralList, {
			page: integralPage.value,
			pageSize: 10,
			type: selectId.value,
			filter_type: btnVal.value == 1 ? 'month' : 'year',
			filter_time: timeStr.value
		},
			"get"
		)
		.then((res) => {
			if (Object.keys(detail.value).length == 0) {
				detail.value = res.data
			}
			integralPage.value++
			if (res.data.items.length > 0) {
				integralList.value = integralList.value.concat(res.data.items)
			}
			if (integralPage.value <= res.data.pageInfo.totalPage) {
				integralLoading.value = true
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	getIntegralListData()
	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
})

onReachBottom(() => {
	getIntegralListData()
})
</script>

<style lang="scss" scoped>
.tabBar {
	.item {
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
		color: #333;
	}
}

/* 头部与关闭按钮 */
.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;

	.button_box {
		width: 240rpx;
		overflow: hidden;
		border: 2rpx solid #f1f1f1;

		// background-color: red;
		.btn {
			flex: 1;
			text-align: center;
			color: #333;
			background-color: #f8f8f8;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 24rpx;
		}

		.active {

			background-color: #333;
			color: #fff;
		}
	}
}

.picker-view {
	width: 100%;
	height: 400rpx;
	margin-top: 20rpx;

	.item {
		line-height: 100rpx;
		text-align: center;
	}
}


.imgs {
	width: 36rpx;
	height: 36rpx;
}

.head_box {
	background: linear-gradient(to left, #FBFFDF, #FFF3EC);

	.rules_box {
		background-color: #ffffff79;
		width: 154rpx;
		height: 52rpx;
		border-radius: 20rpx 0 0 20rpx;


		.icons {
			width: 22rpx;
			height: 22rpx;
			margin-top: 2rpx;
			margin-left: 2rpx;
		}

	}

	&_money {
		color: #9C0000;
		font-size: 24rpx;

		.moneyItem {
			font-size: 56rpx;
			color: #333;
		}
	}

	.title_box {
		background-color: #fff;

		.imgs {
			width: 36rpx;
			height: 36rpx;
		}

		.title_box_item {
			flex: 1;

			.text {
				height: 34rpx;
				line-height: 34rpx;
			}

			.text2 {
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 4rpx;

			}
		}
	}
}

.time_box {
	background: linear-gradient(to bottom, #F2F2FF, #FFFFFF);
}


.content_box {
	// position: absolute;
	// z-index: 5;
	// top: 0;
	// left: 0;
	// background-color: #fff;
	// border-radius: 40rpx 40rpx 0 0;
	padding-top: 20rpx;

	.card_box {
		box-sizing: border-box;

		.card_item {
			height: 116rpx;
			width: 100%;
			background-color: #F8F8F8;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding: 0 20rpx;
			box-sizing: border-box;

			.rig {
				// width: 150rpx;
				flex-shrink: 0;
				text-align: right;

			}

			.active {
				color: #FF0000;
			}

		}
	}
}
</style>